{{ extend './common/layout.html' }}

{{ block 'main' }}

{{ include './common/header.html' }}
<!-- 主体内容 -->
<div class="content">
  {{ include './common/aside.html' }}
  <div class="main">
    <!-- 分类标题 -->
    <div class="title">
      <h4>5b9a716cb2d2bf17706bcc0a</h4>
    </div>
    <!-- /分类标题 -->
    <form class="form-container" action="/admin/article/add" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label>标题</label>
        <input type="text" class="form-control" placeholder="请输入文章标题" name="title">
      </div>
      <div class="form-group">
        <label>作者：{{ user.uname }}（{{ user.email }}）</label>
        <input type="text" class="form-control" readonly name="author" value="{{ user._id + '' }}">
      </div>
      <div class="form-group">
        <label>发布时间</label>
        <input type="date" class="form-control" name="publishDate">
      </div>

      <div class="form-group">
        <label for="exampleInputFile">文章封面</label>
        <input type="file" name="cover" id="cover" multiple>
        <div class="thumbnail-waper"></div>
      </div>
      <div class="form-group">
        <label>内容</label>
        <textarea class="form-control" id="editor" name="content"></textarea>
      </div>
      <div class="buttons">
        <input type="submit" class="btn btn-primary" value="提交">
      </div>
    </form>

  </div>
</div>
<!-- /主体内容 -->

{{ /block }}

{{ block 'js' }}

<script src="/static/admin/lib/ckeditor5/ckeditor.js"></script>
<script type="text/javascript">

  let editor;

  ClassicEditor
    .create(document.querySelector('#editor'))
    .then(newEditor => {
      editor = newEditor;
    })
    .catch(error => {
      console.error(error);
    });

        // 获取数据
        // const editorData = editor.getData();
</script>

<script src="/static/admin/js/previewimg.js"></script>
<script>
  ; (() => {
    previewImg(document.querySelector('#cover'), document.querySelector('.thumbnail-waper'))
  })()
</script>

{{ /block }}